<template>
	<view class="u-page">
		<view style="background: #F1F2e5; margin-bottom:15rpx;width: 100%;height: 20rpx;"></view>
		<!-- <u-row @click="show1=true" style="margin-top: 10px;margin-bottom: 10px;">
				<u-col span=3.5>
				</u-col>
				<u-col  span=1>
					<u-icon size="20px" name="calendar"></u-icon>
				</u-col>
				<u-col span=4>
					{{date}}
				</u-col>
				<u-col span=3.5>	
				</u-col>				
		</u-row> -->
		<u-line></u-line>
		<u-calendar
			:show="show1"
			defaultDate="2022-02-15"
			@confirm="confirm"
			@close="close"
			:monthNum ="100"
		></u-calendar>
		<!-- 房产 -->
			<view class="hot_goods" @click="toxiangqing(item.id)" v-for="item in goods" :key="item.id">
				<view class="goods_list">
				<u--image :showLoading="true" :src="item.imgId" width="100%" height="380rpx" ></u--image>
				<view style="height: 30px;width: 200px;background-color: rgba(237, 113, 110, 0.6);position:relative; top: -30px;border-radius: 10rpx;">
					<u-row >
						<u-col style="color: white;" span=6>
							开拍倒计时:
						</u-col>
						<u-col span=6>
							<u-count-down :time="new Date(item.startTime).getTime() - new Date().getTime()  " format="DD天 HH:mm:ss"></u-count-down>
						</u-col>
					</u-row>
				</view>
				<u-row style="margin-top: -30px;" class="price">
				<u-col span="9">
					<text style="margin-left:5px;font-size: 36rpx;">{{item.goodsName}}</text> <!-- 拍卖名称 -->
				</u-col>
				<u-col class="goprice" span=3 >
					 我要竞拍
				</u-col>
				</u-row>
				<view class="name">
					 <text>起拍价: ￥{{item.startPrice}}</text>   <!-- 当前竞拍价 -->
					 <text>报名人数: {{item.back}}</text>
				</view>
				</view>

			</view>	
			<view style="background-color:#F1F2e5;height: 220px;">
			</view>
	</view>
</template>
<script>
	export default {
		data() {
		
			return {
				
				goods:[],
				date: '',
				show1: false,
				// list: [{
				// 		title: '选择',
				// 		iconUrl: 'http://dongdongoss.oss-cn-beijing.aliyuncs.com/fff3ccdc-9127-4303-a8c7-c5fbf212bdc5u%3D3727915374%2C2341177956%26fm%3D253%26fmt%3Dauto%26app%3D138%26f%3DJPEG.webp'
				// 	}
				// ]
			}
		},
		onLoad(){
			var da = new Date()
			this.date=da.getFullYear()+"-"+(da.getUTCMonth()+1)+"-"+da.getDate()
		},
		onLoad() {
			this.getHotGoods()
		},
		methods: {
			//单查
			toxiangqing(id){
			    uni.navigateTo({
			      url:'/pages/paiMaiXiangQing/paiMaiXiangQing?id='+id,
			    })
			},
			//获取推荐专区列表数据
			async getHotGoods () {
						const res = await this.$myRuquest({
							url: 'client/auction/getGoodsListType?auctionType=2'			
						})
						this.goods = res.data.obj	
						// var data = new Date().getTime()
						// var startdata = new Date(that.goods.startTime).getTime()
						// var enddata = new Date(that.goods.endTime).getTime()
						// if(data < startdata){
						// 	that.paiflag = 0 
						// 	that.daojishi = startdata - data
						// }else if(data > enddata){
						// 	that.paiflag = 2
						// }else {
						// 	that.daojishi = enddata - data
						// 	that.paifla = 1
						// }
						this.goods.forEach(a => {
						a.imgId = 'http://101.43.223.224:8765/image/getImageById?id='+a.imgId.split(",")[0]
						})
						},
						//导航点击的处理函数
						navItemClick (url){
							// console.log(url)
							uni.navigateTo({
								url
							})
						},		
			showCalendar() {
				this.show1 = true
			},
			
			
			confirm(e) {
				this.date = e[0]
				this.show1 = false
			},
			close() {
				this.show1 = false
			},
		},
	}
</script>

<style lang="scss">
	.hot_goods {
		       border-radius: 20rpx;
				background:  white;
				overflow: hidden;
				margin-top: 10px;
				margin-bottom: 20px;
				margin-left: 25px;
				margin-right: 25px;
	.goods_list{
				padding: 2 7rpx;
				flex-wrap: wrap;
				justify-content: space-between;   
	 
	}
	
	
	.price{
		color: #6B4226;
		font-size: 36rpx;
		margin: 15rpx 0 5rpx 0;
			.goprice{
				color:green;
				font-size: 36rpx;
				margin-top: 15rpx;
			}
			}
	.name {
			 	color: red;
			 	font-size: 37rpx;
				line-height: 70rpx;
			 	margin-left: 10rpx;
		   text:nth-child(2){
		   color: grey;
		   font-size: 30rpx;
		   margin-left: 130rpx;
			}
	}
	}
	.u-count-down /deep/  .u-count-down__text{
			 color:white;
	}
	.u-page {
		padding: 0;
		background-color:  #F1F2e5;
		
	}
</style>